<extend name="./Application/Admin/View/common/base.html" />
<block name="crumb">
    <span class="c-gray en">&gt;</span> 属性管理
    <span class="c-gray en">&gt;</span> 修改属性
</block>
<block name="content">
    <form class="form form-horizontal" id="add-attr">
        <input type="hidden" id="type" value="{$attr['type']}">
        <input type="hidden" id="attr_id" value="{$attr['id']}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>属性名称：</label>
            <div class="formControls col-xs-8 col-sm-3">
                <input type="text" class="input-text radius" name="a_name" value="{$attr['a_name']}">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>所属商品模型：</label>
            <div class="formControls col-xs-8 col-sm-2" >
                <span class="select-box">
                <select name="model" class="select">
                    <volist name="models" id="model" >
                        <if condition="$model['id'] eq $attr['model_id']">
                            <option value="{$model['id']}" selected="selected">
                                {$model['m_name']}
                            </option>
                            <else />
                            <option value="{$model['id']}">
                                {$model['m_name']}
                            </option>
                        </if>
                    </volist>
                </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">该属性值的录入方式：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <if condition="$attr['type'] eq 1">
                    <div class="radio-box">
                        <div class="iradio-blue checked"><input name="type" type="radio" class="op" value="1"  checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                        <label for="sex-1" class="">手工录入</label>
                    </div>
                    <div class="radio-box">
                        <div class="iradio-blue"><input name="type" type="radio" class="op" value="2" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                        <label for="sex-2" class="">从下面的列表中选择（一行代表一个属性值）</label>
                    </div>
                    <else />
                    <div class="radio-box">
                        <div class="iradio-blue"><input name="type" type="radio" class="op" value="1" checked="" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                        <label for="sex-1" class="">手工录入</label>
                    </div>
                    <div class="radio-box">
                        <div class="iradio-blue checked"><input name="type" type="radio" class="op" value="2"  style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                        <label for="sex-2" class="">从下面的列表中选择（一行代表一个属性值）</label>
                    </div>

                </if>
            </div>
        </div>

            <div class="row cl" id="optional" style="display: block;">
                <label class="form-label col-xs-4 col-sm-2">可选列表：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="attr_val" class="textarea" style="width: 300px;" placeholder="选择手工录入的时候，不需要填写！"><volist name="attr_val" id="vo"><?php echo $vo['val']."\n";?></volist></textarea>
                </div>
            </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"></label>
            <button id="save" class="btn btn-secondary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
        </div>
    </form>
</block>
<block name="js">
    <script type="text/javascript">
        $(function () {

            //切换项的逻辑判断
            $('.radio-box').click(function () {
                $('.radio-box').find('.iradio-blue').removeClass('checked');
                var op = $(this).find('.op').val();
                if (op == 1) {
                    $('#optional').hide();
                    $("textarea[name='attr_val']").val('');
                    $('#type').val(1);
                } else {
                    $('#optional').show();
                    $('#type').val(2);
                }

                $(this).find('.iradio-blue').addClass('checked');
            });

            //点击保存属性
            $('#save').click(function () {
                $('#add-attr').validate({
                    rules: {
                        a_name: {required: true, minlength: 2},
                        models: {required: true}
                    },
                    messages: {
                        a_name: {required: '请填写属性名称！', minlength: '属性名称不少于2位！'}
                    },
                    submitHandler: function (form) {
                        $(form).ajaxSubmit({
                            type: 'post',
                            url: "{:U('Attr/edit')}",
                            data: {
                                attr_id: $('#attr_id').val(),
                                a_name: $("input[name='a_name']").val(),
                                model_id: $(".select option:selected").val(),
                                attr_val: $("textarea[name='attr_val']").val(),
                                type: $('#type').val()
                            },
                            beforeSend: function () {
                                layer.msg('商品属性添加中..', {icon: 16,time:0});
                            },
                            success: function (msg) {
                                layer.msg('商品属性修改成功！', {icon: 6,time:1000});
                                setTimeout(function(){ window.location.href = "{:U('Attr/index')}"; }, 1000);
                            }
                        });
                    }
                });
            });
        });

        
    </script>
</block>
